<template>
  <el-menu 
    :default-active="activeIndex" 
    class="el-menu-demo" 
    mode="horizontal" 
    :ellipsis="false" 
    @select="handleSelect" 
  > 
    <el-menu-item index="0">教学论坛系统</el-menu-item> 
    <el-menu-item index="home">首页</el-menu-item> 
    <el-menu-item index="qa">问答</el-menu-item> 
    <el-menu-item index="course">课程</el-menu-item> 
    <el-menu-item index="follow">关注</el-menu-item> 
    
    <div class="search-bar">
      <el-input
        v-model="searchKey"
        placeholder="搜索课程/问题/帖子"
        class="search-input"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
    </div>
    <div class="user-actions">
      <el-button @click="openCreateDialog">发布内容</el-button>
      <div class="avatar" @click="toggleUserMenu">
        <el-avatar
          v-if="user.avatar"
          :src="user.avatar"
          :icon="UserFilled"
          @error="handleAvatarError"
        />
        <el-avatar v-else :icon="UserFilled"></el-avatar>
      </div>
      <transition-group name="menu-fade" class="user-menu" tag="div" v-show="showUserMenu">
        <div class="menu-item" key="profile" @click="goProfile">个人中心</div>
        <div class="menu-item" key="setting" @click="goSetting">设置</div>
        <div class="menu-item" key="logout" @click="handleLogout">退出登录</div>
      </transition-group>
     
    </div>
  
  </el-menu> 
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { Search } from '@element-plus/icons-vue'
import { UserFilled } from '@element-plus/icons-vue'

const router = useRouter()
const props = defineProps<{
  user: { username: string; avatar: string; rank: number; id: number }
  currentTab: 'home' | 'qa' | 'course' | 'follow' | 'live'
  searchKey: string
  showUserMenu: boolean
}>()

const emit = defineEmits(['update:currentTab', 'update:searchKey', 'update:showUserMenu'])

const activeIndex = ref(props.currentTab)
const searchKey = ref(props.searchKey)
const showUserMenu = ref(props.showUserMenu)

const handleSelect = (key: string) => {
  emit('update:currentTab', key as typeof props.currentTab)
}

const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value
  emit('update:showUserMenu', showUserMenu.value)
}

const handleSearch = async () => {
  if (searchKey.value.trim()) {
    try {
      const res = await axios.get(`/api/search?key=${searchKey.value}`)
      console.log('搜索结果:', res.data)
      router.push(`/search?key=${searchKey.value}`)
    } catch (error) {
      console.error('搜索失败:', error)
      alert('搜索失败，请重试')
    }
  }
}

const openCreateDialog = () => {
  router.push('/create-post')
}

const goProfile = () => {
  router.push(`/profile/${props.user.id}`)
}

const goSetting = () => {
  router.push('/setting')
}

const handleLogout = () => {
  console.log('退出登录')
  router.push('/login')
}

const handleAvatarError = (event: Event) => {
  (event.target as HTMLImageElement).style.display = 'none'
}
</script>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: 20px; /* 减少右侧间距 */
}

.el-menu-demo {
  justify-content: flex-start; /* 让菜单项左对齐 */
  flex-wrap: wrap; /* 允许菜单项换行 */
}

/* 修改选择器，从搜索栏开始向右对齐 */
.el-menu-demo > :nth-child(n+6) {
  margin-left: auto; /* 使后续元素右对齐 */
  display: inline-flex; /* 让元素水平排列 */
  align-items: center; /* 垂直居中 */
  gap: 15px; /* 设置元素间距 */
}

.search-bar {
  margin-right: 0; /* 重置原有右侧间距 */
}

.user-actions {
  display: inline-flex; /* 让用户操作区域内元素水平排列 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 设置内部元素间距 */
}

/* 保留原有样式 */
.search-input { 
  width: 500px; /* 增加宽度 */
  font-size: 16px; /* 放大字体 */
  height: 40px; /* 增加高度 */
}
.el-button { 
  font-size: 16px; /* 放大按钮图标 */
}
.avatar {
  cursor: pointer;
  position: relative;
}
.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.default-avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee;
  text-align: center;
  line-height: 40px;
}
.user-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: white;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.menu-item {
  padding: 10px 20px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #f5f7fa;
}
</style>